import React from 'react';
import { Divider, Row, Tag, message } from 'antd';
import { history, connect } from 'umi'
import { Descriptions } from '@/molecules';
import { useRequest } from '@/hooks';
import { getApplyDetail } from '@/services/flowMine/apply';
import { eventTrack } from '@/utils/track';
import { queryProcess } from '@/pages/WorkFlow/Flow/services';
import { getProcessInfo } from '../service';

const DemandDetail = ({ data = {}, user, style }) => {
    const { employeeCode } = user || {};
    const {
        recruitNums = '0',
        workNatureName = '--',
        entryDateStart = '--',
        entryDateEnd = '--',
        recruitDegreeName = '--',
        workYearsName = '--',
        positionName = '--',
        rankValue = '--',
        applyName = '--',
        applyTime = '--',
        applyStatus = '',
        positionDesc = '',
        jobRequirement = '',
        positionTag = '',
        processInstanceId = ''
    } = data;
    const { data: applyDetailData = {} } = useRequest(() => getApplyDetail({ processInstanceId }));

    const { run: fetchProcessInfo } = useRequest(() => getProcessInfo(processInstanceId), {
        manual: true,
        onSuccess: res => {
            if (res) {
                const { code, data: resData, msg } = res;
                if (code === 10000) {
                    history.push({
                        pathname: '/personal/portal/waitApproval/approvalDetail',
                        query: {
                            taskId: resData?.id,
                            processInstanceName: applyName
                        }
                    });
                } else {
                    message.error(msg);
                }
            } else {
                message.error('操作失败');
            }
        }
    });

    const { run: fetchProcess } = useRequest(() => queryProcess({ processInstanceId }), {
        manual: true,
        onSuccess: res => {
            if (res) {
                const { code, data: resData, msg } = res;
                if (code === 10000) {
                    const judgeUser = resData?.find(item => item.type === '审批人' && item.status === 2);
                    // 判断当前用户是审批人，并且当前处于审批中状态
                    if (judgeUser?.userList?.includes(employeeCode)) {
                        fetchProcessInfo();
                        return;
                    }
                    const initialUser = resData?.find(item => item.type === '发起人');
                    // 判断当前用户是发起人
                    if (initialUser?.userList?.includes(employeeCode)) {
                        history.push({
                            pathname: '/personal/portal/myApplication/detail',
                            query: {
                                processInstanceId,
                                processInstanceName: applyName
                            }
                        });
                        return;
                    }
                    history.push({
                        pathname: '/personal/portal/myAuditRead/myAuditReadDetail',
                        query: {
                            processInstanceId
                        }
                    });
                } else {
                    message.error(msg);
                }
            } else {
                message.error('操作失败');
            }
        }
    });

    const { candidateUsersMap = {} } = applyDetailData.data || {};
    const names = Object.values(candidateUsersMap).join(',');

    const time = entryDateStart && entryDateEnd ? `${entryDateStart}~${entryDateEnd}` : '--';

    const descriptions1 = [
        { label: '工作性质', value: workNatureName },
        { label: '需求人数', value: recruitNums },
        { label: '到岗时间', value: time }
    ];

    const descriptions2 = [
        { label: '经验和学历', value: `${workYearsName}/${recruitDegreeName}` },
        { label: '匹配职位', value: `${positionName}/${rankValue}` },
        {
            label: '职位要求',
            value: `${positionDesc}`
        },
        {
            label: '岗位职责',
            value: jobRequirement
        },
        {
            label: '职位关键词',
            value: positionTag.split(',').map(item => (item ? <Tag key={item}>{item}</Tag> : null))
        }
    ];

    const descriptions3 = [
        { label: '审批人', value: names },
        { label: '审批时间', value: applyTime },
        { label: '审批状态', value: <Tag>{applyStatus}</Tag> },
        {
            label: '审批详情',
            value: (
                <a
                    onClick={e => {
                        e.preventDefault();
                        fetchProcess();
                        eventTrack({
                            eventName:
                                'personnel_management_recruitment_demand_list_detail_require_approve_detail_click',
                            pageName: 'personnel_management_recruitment',
                            eventProps: {
                                click_context: data.dutyName
                            }
                        });
                    }}
                >
                    {applyName}
                </a>
            )
        }
    ];

    return (
        <Row type="flex">
            <div style={{ flex: 1 }}>
                <div style={{ paddingTop: 16 }} />
                <Descriptions title="基本信息" descriptions={descriptions1} />
                <Divider />
                <Descriptions title="职位要求" descriptions={descriptions2} className={style} />
            </div>
            <Divider type="vertical" style={{ height: 'auto', marginLeft: 32 }} />
            <div style={{ overflow: 'hidden', paddingRight: 32, maxWidth: 300 }}>
                <Descriptions title="" descriptions={descriptions3} />
            </div>
        </Row>
    );
};

export default connect(({ user }) => ({ user: user.currentUser }))(DemandDetail);
